<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>登陆-Sharing Your Story</title>
		<link rel="Shortcut Icon" href="public/img/favicon.ico" />
		<link rel="stylesheet" href="public/bootstrap/css/bootstrap.min.css" />
		<script src="public/js/jquery-3.2.1.min.js"></script>
		<script src="public/bootstrap/js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="public/css/style.css" />
		<script src="public/js/holder.min.js"></script>
	</head>
	<script type="text/javascript">
		
		function hideError(id){
			document.getElementById(id+"Error").innerHTML="";
		}
		function checkUserId(){
			
			var uValue=document.getElementById("userId").value;
			if(uValue=="admin"){
				return true;
			}
			if(uValue.length<9){
				document.getElementById("userIdError").innerHTML="用户名格式不正确";
				document.getElementById("error").innerHTML="";
				return false;
			}
			return true;
		}
		function checkPwd(){
			var uValue=document.getElementById("pwd").value;
			if(uValue==""){
				return false;
			}
			return true;
		}
		function checkForm(){
			if(checkUserId()&&checkPwd()){
				return true;
			}
			return false;
		}
	</script>
	<body>
		<!--顶部效果-->
		<%@ include file= "/WEB-INF/zpublicpages/header.jsp" %>
		
		<!--登陆标识-->
		<div class="login-title">登录</div>
		
		<!--登录框-->
		<div class="row">
			<div class="col-md-offset-3 col-md-6">
				<div class="form-line-up"></div>
				<div class="row">
					<div class="col-md-offset-1 col-md-10">
						<div class="panel panel-primary">
							<div class="panel-heading">
								<div class="panel-title" style="text-align: center;">
									<img style="border-radius: 50%;height: 90px;" src="holder.js/100x100" alt="">
								</div>
							</div>
							
							<div class="panel-body">
								<form action="${pageContext.request.contextPath}/userServlet?operation=login" method='post'
															 onsubmit="return checkForm()">
									<h4 class="error" id="error">
										${requestScope['loginError']}
									</h4>
									<div class="form-group">
										<div class="input-group input-group-lg">
											<span class="input-group-addon">
												<span class='glyphicon glyphicon-user'></span>
											</span>
											<input type="text" name="userId" class='form-control'
												onfocus="hideError('userId')" onblur="checkUserId()"
												placeholder='学号或邮箱' id='userId'>
										</div>
										<h4 class="error" id="userIdError"></h4>
									</div>
									<div class="form-group">
										<div class="input-group input-group-lg">
											<span class="input-group-addon">
												<span class='glyphicon glyphicon-lock'></span>
											</span>
											<input type="password" name="userPwd" class='form-control'
												onfocus="hideError('pwd')" onblur="checkPwd()"
												placeholder='密码' id="pwd">
										</div>
										<h4 class="error" id="pwdError"></h4>
									</div>
									<div class="form-group ok" style="text-align: center;">
										<input style="width: 100%;" type="submit" value="登录" class='btn btn-primary btn-lg'>
									</div>
									<div class="form-group">
										<div style="float: right; margin-right: 10px;">
											<label style="margin-right:190px; font-size:15px; letter-spacing:1.5px; font-weight:normal;">
											<input type="checkbox" name="savePwd"/>&nbsp;<span style="margin-top:0px; float:right;">自动登录</span></label>
											<h4 style="display : inline;"><a href="${pageContext.request.contextPath}/forgetPwd">忘记密码</a>&nbsp;&nbsp;
											<a href="${pageContext.request.contextPath}/registerUI">前往注册</a></h4>
										</div>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<!--底部效果-->
		<%@ include file="/WEB-INF/zpublicpages/footer.jsp"%>
	</body>
</html>